<template>
  <div class="app-container search-list">
    <table-pagination
        style="position: relative;z-index: 9"
        ref="el-search-table"
        :fetch="getData"
        type="remote"
        :adaptive = "fixOption"
        :page-sizes="[20, 50, 100]"
        :columns="columns"
        :form-options="formOptions"
        list-field="records"
        total-field="totalElements"
        page-index-key="page"
        page-size-key="pageSize"
        height="300"
        method="get">
      <template slot="button">
        <el-button size="small" type="primary" icon="el-icon-circle-plus" @click="handleAdd">新增</el-button>
      </template>
      <el-table-column label="操作" slot="append" width="380px">
        <template slot-scope="scope">
          <el-button plain size="mini" type="primary" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button plain size="mini" type="primary" @click="handleFill(scope.row.id)">数据补充</el-button>
          <el-button plain size="mini"  type="primary" @click="handlePreview(scope.row)">预览</el-button>
          <el-button plain size="mini"  type="primary" @click="handleCopy(scope.row.id)">复制</el-button>
          <el-button plain size="mini" type="danger" @click="handleDel(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
      <template slot-scope="scope" slot="seriesImage">
        <img v-if="scope.row.icon" :src="scope.row.icon" width="80px" height="60px" style="object-fit: contain"/>
      </template>
    </table-pagination>
  </div>
</template>

<script>
import TablePagination from '_c/Tables/table-pagination';
import {getSeriesPage, deleteSeries, copySeries, dataSupplementySeries} from '@/api/series';
import {mapGetters} from 'vuex';
export default {
    name: 'series-list',
    components: {TablePagination},
    data () {
        return {
            fixOption: {fixedHeader: true},
            formParams: {
                seriesName: '',
                seriesType: ''
            },
            pageParams: {
                page: 1,
                pageSize: 20,
                seriesName: '',
                seriesType: '',
                sortType: 'DESC',
                sortField: 'sort'
            },
            formOptions: {
                showResetBtn: true,
                showSearchBtn: true,
                inline: false,
                labelWidth: 120,
                submitBtnText: '查询',
                size: 'small',
                resetBtnCallback: () => {
                    this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                },
                forms: [
                    { prop: 'seriesName', label: '系列名称：', placeholder: '请输入系列名称' }
                    // { prop: 'seriesName', label: '系列名称：', placeholder: '请输入系列名称' },
                    // { prop: 'seriesType',
                    //     label: '系列类型：',
                    //     itemType: 'select',
                    //     placeholder: '请选择系列类型',
                    //     multiple: false,
                    //     selectFetch: () => {
                    //         return new Promise((resolve, reject) => {
                    //             resolve([
                    //                 {
                    //                     value: 'manual',
                    //                     label: '手动'
                    //                 }, {
                    //                     value: 'automatic',
                    //                     label: '自动'
                    //                 }
                    //             ]);
                    //         });
                    //     }
                    // }
                ]
            },
            columns: [
                { label: '系列名称', prop: 'name' },
                { label: '系列类型',
                    prop: 'seriesType',
                    render: row => {
                        const { seriesType } = row;
                        return seriesType === 'automatic' ? '自动' : '手动';
                    }
                },
                { label: '图标', prop: 'icon', slotName: 'seriesImage' },
                { label: '商品数量', prop: 'spuCount' }
            ],
            submitLoading: false
        };
    },
    computed: {
        ...mapGetters(['siteList']),
        siteId () {
            return this.$store.state.user.siteId;
        },
        siteInfo () {
            let info = this.siteList.find(res => res.id === Number(this.siteId));
            return info;
        }
    },
    created () {
        this.initData();
    },
    methods: {
        getData (params) {
            return new Promise((resolve, reject) => {
                let parameters = {
                    siteId: this.siteId,
                    seriesName: params.seriesName,
                    seriesType: params.seriesType
                };
                getSeriesPage({...parameters, ...params}).then((res) => {
                    resolve(res);
                });
            });
        },
        initData () {
        },
        handleSearch () {
            this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
        },
        handleSubmit (name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                } else {
                    this.$message.error('请正确填写！');
                }
            });
        },
        handleReset (name) {
            this.$refs[name].resetFields();
        },
        handleAdd () {
            this.$router.push({name: 'series-add'});
        },
        handleEdit (id) {
            this.$router.push({name: 'series-detail', params: {id}});
        },
        handleFill (id) {
            dataSupplementySeries({seriesId: id, siteId: this.siteId}).then(res => {
                if (res.code === 200) {
                    this.$message.success('数据补充成功');
                    this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                } else {
                    this.$message.error(res.message);
                }
            });
        },
        handleCopy (id) {
            this.$confirm('确认复制该条数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let data = {
                    siteId: this.siteId,
                    seriesId: id
                };
                copySeries(data).then(res => {
                    this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                });
            });
        },
        handlePreview (row) {
            let url = `https://${this.siteInfo.domainName}/collection/${row.fullName}-${row.id}`;
            window.open(url, '_blank');
        },
        handleDel (id) {
            this.$confirm('确认删除该条数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteSeries(this.siteId, id).then(res => {
                    this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                });
            });
        }
    }
};
</script>

<style scoped lang="scss">
.search-list{
  h4{
    border-bottom: 1px solid #E8E8E8;
    margin: 0;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
}
</style>
